<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="" method="">
			用户名<input type="text" name="" id="userName" value="" /><br>
			密码<input type="password" name=""id="userPwd"  /><br>
			<button type="submit" id="btn">提交</button>
		</form>
	</body>
	<script type="text/javascript">
	// 3.登入页面
	// 用户名输入框，
	// 密码输入框，
	// 提交按钮

	// 任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
		document.getElementById('userName').onfocus=function(){console.log('用户在输入名称')}
	//          3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
		document.getElementById('userName').onblur=function(){
			var name=document.getElementById('userName');
			if(name.value ==''){
				alert('没有输入用户名')
			}
		}
	//          3.3  密码框获取焦点事件，控制台输出：用户在输入密码
		document.getElementById('userPwd').onfocus=function(){console.log('用户在输入密码')}
	//          3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
		document.getElementById('userPwd').onblur=function(){
			var pwd=document.getElementById('userPwd');
			if(pwd.value == ''){
				alert('没有输入密码')
			}
		}
	//          3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
	//               密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
	document.getElementById('btn').onclick = function(){
		var name=document.getElementById('userName');
		var pwd=document.getElementById('userPwd');
		if(name.value == '' && pwd.value == ''){
			alert('用户名和密码为空')
			return
		}
		if(name.value == ''){
			alert('用户名为空')
			return
		}
		if(pwd.value == ''){
			alert('密码为空')
			return
		}
	}	
	</script>
</html>
